<template>
	<w-app-page class="bill-list">
		<fx-header title="点单详情">
		</fx-header>
		<div class="bill-list__content">
			<div class="content-left">
				<h1 style="padding: 20px">点单明细</h1>
				<a-table :columns="columnsLeft" :data-source="listData" :pagination="false" bordered>
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'action'">
							<a-button v-show="record.relaType === '3'" @click="removeGift(record)" type="primary" danger size="middle">移除</a-button>
						</template>
					</template>
					<template #summary>
						<a-table-summary-row>
							<a-table-summary-cell>总计</a-table-summary-cell>
							<a-table-summary-cell></a-table-summary-cell>
							<a-table-summary-cell>
								<a-typography-text>{{ totals.totalNum }}</a-typography-text>
							</a-table-summary-cell>
							<a-table-summary-cell></a-table-summary-cell>
							<a-table-summary-cell>
								<a-typography-text type="success">{{ totals.totalMoney }}</a-typography-text>
							</a-table-summary-cell>
							<a-table-summary-cell></a-table-summary-cell>
						</a-table-summary-row>
					</template>
				</a-table>
			</div>
			<div class="content-right">
				<h1 style="padding: 20px">赠送方案</h1>
				<a-table :columns="columnsRight" :data-source="giftData" :pagination="false" bordered>
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'orderNum'">
							<a-input-number v-model:value="record.orderNum"  :min="0" :max="record.giftNum" :step="1" :precision="0" >
								<template #addonAfter>剩余:{{record.giftNum}}</template>
							</a-input-number>
						</template>
						<template v-else-if="column.key === 'action'">
							<a-button type='primary' size="middle" @click="onAddGiftClick(record)">赠送</a-button>
						</template>
					</template>
				</a-table>
			</div>
		</div>
		<div class="bill-btn">
			<a-button type="primary" @click="onOrderClick">下单</a-button>
		</div>
	</w-app-page>
	<a-modal v-model:open="centerDialogVisible" centered title="结账" @ok="onHandlePay" okText="支付成功"  bodyStyle="text-align:center">
		<h1>请扫描二维码支付</h1>
		<img :src="payImgUrl" alt="" style=" margin: 0 auto;width:300px; height:300px;">
	</a-modal>
</template>
<script>
import { defineComponent, ref, computed } from 'vue'
import { listCounterOrderFlowDetail, getProductGift, addCounterOrderFlowDetail, completePayment } from '@/js/api/bar'
import { useRoute } from 'vue-router'
import { getFxInstance } from '@/js/instance'

export default defineComponent({
	name: 'orderDetail',
	setup () {
		const fxInstance = getFxInstance()
		// const router = useRouter()
		const route = useRoute()

		const routeQuery = route.query
		const listData = ref([])
		const giftData = ref([])
		const payImgUrl = ref('')
		const centerDialogVisible = ref(false)

		const columnsLeft = ref([
			{
				title: '名称',
				dataIndex: 'relaName',
				ellipsis: true
			},
			{
				title: '类型',
				dataIndex: 'relaTypeName',
				ellipsis: true
			},
			{
				title: '数量',
				dataIndex: 'orderNum',
				ellipsis: true
			},
			{
				title: '单价(元)',
				dataIndex: 'unitPrice',
				ellipsis: true
			},
			{
				title: '总价(元)',
				dataIndex: 'totalPrice',
				ellipsis: true
			},
			{
				title: '操作',
				key: 'action'
			}
		])
		const columnsRight = ref([
			{
				title: '名称',
				dataIndex: 'relaName',
				ellipsis: true
			},
			{
				title: '赠送数量',
				dataIndex: 'orderNum',
				key: 'orderNum',
				ellipsis: true
			},
			{
				title: '操作',
				key: 'action'
			}
		])
		const fetchData = async () => {
			const params = {
				orderFlowDetailStatus: 1,
				...routeQuery
			}
			console.log(params)
			Promise.all([
				listCounterOrderFlowDetail(params),
				getProductGift()
			]).then(([orderRes, giftRes]) => {
				if (orderRes.code === 200) {
					listData.value = orderRes.data
				}
				if (giftRes.code === 200) {
					giftData.value = giftRes.data
				}
			}).catch(error => {
				console.error('Promise.all failed:', error)
			})
		}

		const totals = computed(() => {
			let totalNum = 0
			let totalMoney = 0

			listData.value.forEach(({ orderNum, totalPrice }) => {
				totalNum += orderNum
				totalMoney += totalPrice
			})
			return { totalNum, totalMoney }
		})
		const onAddGiftClick = (record) => {
			if (record.orderNum === 0) {
				return fxInstance.$fxMessage.success('请添加赠品')
			}
			listData.value.push(fxInstance.$fxUtils.deepClone(record))
		}
		const removeGift = (record) => {
			listData.value.splice(listData.value.indexOf(record), 1)
		}
		const onOrderClick = () => {
			fxInstance.$fxMessageBox.confirm('是否确认下单?').then(() => {
				const params = listData.value.map(item => {
					delete item.createTime
					return {
						...item,
						...routeQuery,
						orderFlowDetailStatus: 1,
						relaId: item.relaId,
						unitPrice: item.unitPrice,
						totalPrice: item.totalPrice
					}
				})
				return addCounterOrderFlowDetail({ counterOrderFlowDetailList: params }).then((res) => {
					if (res.code === 200) {
						if (res.data.isReachCounterMinimumCharge === '0') {
							fxInstance.$fxMessage.success('订单金额少于最低消费，请添加商品')
						} else {
							payImgUrl.value = res.data.paymentQrCodeFilePath
							centerDialogVisible.value = true
						}
					}
				})
			})
		}
		const onHandlePay = () => {
			fxInstance.$fxMessageBox.confirm('确认支付成功').then(() => {
				completePayment(routeQuery).then(res => {
					if (res.code === 200) {
						fxInstance.$fxMessage.success('已成功下单')
						centerDialogVisible.value = false
					}
				})
			})
		}
		const init = () => {
			fetchData()
		}
		init()
		return {
			fetchData,
			listData,
			giftData,
			columnsLeft,
			columnsRight,
			totals,
			onAddGiftClick,
			onOrderClick,
			removeGift,
			centerDialogVisible,
			payImgUrl,
			onHandlePay
		}
	}
})
</script>
<style lang="scss" scoped>
@import "$assets/stylus/varsty";
.bill-list {
	display: flex;
	align-items: center;
	&__content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: auto;
		width: 100%;
		flex: 1;
		.content-left {
			width: 59%;
			height: 100%;
			text-align: center;
		}
		.content-right {
			width: 39%;
			height: 100%;
			text-align: center;
		}
	}
	.bill-btn {
		margin: 15px;
	}
}
</style>
